<template>
  <div class="container">
    <el-card class="topic-list">
      <!-- 关键字搜索 -->
      <el-form :inline="true" :model="formInline" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.keywords"
                style="width:250px;"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end">
              <el-form-item>
                <el-button @click=>清除</el-button>
                <el-button type="primary">查询</el-button>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- /关键字搜索 -->
      <!-- 数据条目 -->
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <i class="el-icon-info" style="color: #8f9298"></i>
            <span class="data-num-text">数据一共&nbsp;11&nbsp;条</span>
          </div></el-col
        >
      </el-row>
      <!-- /数据条目 -->
      <questionList></questionList>
    </el-card>
  </div>
</template>

<script>
import questionList from '@/module-hmmm/components/questionList.vue'
export default {
  data () {
    return {
      formInline: {
        keywords: ''
      }
    }
  },
  components: {
    questionList
  }
}
</script>

<style scoped lang='scss'>
.topic-list {
  margin-bottom: 10px;
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    padding-left: 20px;
    .data-num-text {
      font-size: 14px;
      color: #8f9298;
      padding: 10px;
    }
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }
}
</style>
